<template>
    <div class="search-mask" v-if="visible">
        <div class="search h100 flex-v-center">
            <div class="input flex-center">
                <i class="icon-search mar-r10 color-ccc"></i>
                <input 
                    v-model="keyword" 
                    class="flex-1" 
                    type="text" 
                    confirm-type="search" 
                    :focus="Focus"
                    :placeholder="placeholder" 
                    @confirm="inputConfirm" 
                    placeholder-class="placeholder" >
                <i @click="keyword = ''" v-if="keyword" class="icon-close-circular"></i>
            </div>
            
            <div class="cancel mar-l20 pad-lr20 flex-center" @click="closeSearch">
                <span class="fs26">取消</span>
            </div>
        </div>
        <div class="search_container">
            <scroll-view scroll-y @scrolltolower="scrolltoBottom">
                <slot></slot>
                <pub-list-end :loading="scroll.loading" :max="max" :noData="noData"></pub-list-end>
                <div class="wfull h200"></div>
            </scroll-view>
        </div>
    </div>
</template>

<script>
import { debounce, throttle } from '@/utils/functions'
export default {
    data() {
        return{
            visible: false,
            keyword: '',
            Focus: false,
            scroll: {
                page: 1,
                loading: false,
            },

        }
    },
    props: {
        max: {
            type: Boolean,
            default: false
        },
        noData: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    watch: {
        keyword() {
            this.onRefresh()
        }
    },
    onLoad() {

    },
    methods: {
        open() {
            this.visible = true
            this.scroll.page = 1
            this.scroll.loading = false
            this.$nextTick(() => {
                this.Focus = true
            })

        },
        scrolltoBottom() {
            this.onInfinite()
        },

        inputConfirm(e) {
            console.log(e);
            this.onRefresh()
        },

        // 重头第一页刷新列表
        onRefresh: debounce(function() {
            this.scroll.loading = true
            this.scroll.page = 1
            this.$emit('api', this.keyword, this.scroll.page, () => {
                this.scroll.loading = false;
            })
        }),
        // 滚动到底部加载
        onInfinite: throttle(function() {
            if(this.scroll.loading || this.max || this.noData) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.$emit('api', this.keyword, this.scroll.page, () => {
                this.scroll.loading = false;
            })
        }),
        closeSearch(){
            this.visible = false
            this.keyword = ''
            this.Focus = false
        }
    }

}
</script>

<style lang="less" scoped>
.search-mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 1);
    z-index: 500;
    display: flex;
    flex-direction: column;
    .search{
        background: #fff;
        padding: 0 30rpx;
        margin-bottom: 10rpx;
        height: 130rpx;
        .input{
            flex: 1;
            border-radius: 10rpx;
            height: 70rpx;
            background: #eee;
            padding-left: 20rpx;
            .icon-close-circular{
                width: 70rpx;
                height: 70rpx;
                .align(center);
            }
        }
        .cancel{
            width: 100rpx;
            height: 70rpx;
            border-radius: 10rpx;
            border: 1px solid #ddd;
        }
    }

    .search_container{
        flex: 1;
        height: 10px;
        scroll-view{
            width: 100%;
            height: 100%;
            /deep/ .uni-scroll-view-content{
                height: auto;
            }
        }
    }
}

</style>